<template lang="pug">
  .zgplugin-select.zgplugin-empty(v-if="(!exist || !show)&&editor")
    svg-icon.empty-icon(icon-class="组件下拉框")
  .zgplugin-select(v-show="show" v-else-if="exist")
    normal-select-render(:config="config" :readonlyMain="readonlyMain" :editor="editor"  :isMobile="isMobile" :scope="scope" :cancelLinkAndDefaultValue="cancelLinkAndDefaultValue" ref="normalSelect")
</template>

<script>
import inputCommon from '../../../../mixin/inputCommon'
import normalSelectRender from './normalSelectRender'

export default {
  name: 'render',
  components: { normalSelectRender },
  props: ['config', 'readonlyMain', 'editor', 'isMobile', 'scope', 'cancelLinkAndDefaultValue'],
  inject: ['rootForm'],
  mixins: [inputCommon],
  data() {
    return {
      default: this.config.selectType === 'single' ? undefined : []
    }
  },
  methods: {
    commit() {
      this.$refs.filterSelect.commit()
    },
    validate() {
      return this.$refs.normalSelect.validate()
    }
  },
  created() {
  }
}
</script>
<style lang="scss">
  .zgplugin-select {
    margin-top: 16px;
    .el-form-item {
      margin-bottom: 0 !important;
    }
    // 树型下拉框样式
    .tree-select{
      .vue-treeselect__control{
        height: 34px!important;
        line-height: 32px!important;
        box-sizing: border-box!important;
        border-radius: 3px!important;
        border:1px solid #ccc!important;
        .vue-treeselect__single-value{
          color:#606266!important;
        }
      }
      .vue-treeselect__list{
        line-height: 36px!important;
        font-size:12px!important;
        // color:#606266!important;
      }
      .vue-treeselect__list-item{
        font-size: 12px;
        color:#606266;
      }
      .vue-treeselect__multi-value{
        line-height: 24px!important;
        .vue-treeselect__multi-value-item-container{
          line-height: 24px!important;
        }
      }

    }
    .el-select {
      width: 100%;
      .el-input__inner {
        height: 34px;
      }
    }
  }
</style>
